<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <!--遍历人员-->
  <input placeholder="请输入姓名搜索" type="text" v-model="keyWord">
  <button @click="sortType=0">年龄原序</button>
  <button @click="sortType=2">年龄降序</button>
  <button @click="sortType=1">年龄升序</button>
  <ul>
    <li v-for="(p,index) in persons2" :key="p.id">
      {{p.name}}-{{p.age}}-{{p.sex}}<input type="text">
    </li>
  </ul>


</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#root',
    data: {
      persons: [
        {id: '001', name: '马冬梅', age: 17, sex: '女'},
        {id: '002', name: '周冬雨', age: 15, sex: '女'},
        {id: '003', name: '周杰伦', age: 19, sex: '男'},
        {id: '004', name: '温兆伦', age: 29, sex: '男'}
      ],
      keyWord: '',
      sortType: 0//0-原顺序,1-降序,2-升序
    },
    computed: {
      persons2: {
        get() {
          const arr = this.persons.filter((p) => {
            return p.name.indexOf(this.keyWord) > -1
          })

          if (this.sortType) {
            return arr.sort((a, b) => {
              return this.sortType == 1 ? a.age - b.age : b.age-a.age
            })
          }
          return arr;
        }
      }

    }
  });
</script>
</body>
</html>
